<template>
	<view class="tab_container">
		<view>
			<tui-list-cell unlined>
				<view class="tui-merchant-line-cell">
					<view class="tui-mm-title">{{merchantName}}</view>

					<view class="tui-mm-time-tab">
						<tui-segmented-control :values="navbar" :current="currentDataType" radius="30px"
							activeColor="#07c160" @click="change">
						</tui-segmented-control>
					</view>

				</view>
			</tui-list-cell>
			<view class="tui-merchant-header-btm">
				<view class="tui-btm-item">
					<view class="tui-btm-text">客户数</view>
					<view class="tui-btm-num mt15">{{businessAnalysis.count}}</view>

				</view>
				<view class="tui-btm-item">
					<view class="tui-btm-text">销售额</view>
					<view class="tui-btm-num mt15">{{businessAnalysis.amount}}</view>

				</view>
				<view class="tui-btm-item">
					<view class="tui-btm-text">日平均</view>
					<view class="tui-btm-num mt15">{{businessAnalysis.average}}</view>

				</view>
				<view class="tui-btm-item">
					<view class="tui-btm-text">绩效</view>
					<view class="tui-btm-num mt15">{{businessAnalysis.salesmanCom}}</view>

				</view>
			</view>
			<canvas canvas-id="mjaSvTRmhqntNaXubSm" id="mjaSvTRmhqntNaXubSm" class="charts pt15" />
		</view>

		<view class="tui-merchant-list pad30">
			<tui-list-cell padding="0" backgroundColor="#00000000" unlined :hover="false">
				<view class="tui-cell-header">
					<view class="tui-cell-title">商家列表</view>
				</view>
			</tui-list-cell>
			<!-- <view > -->

			<block v-for="(item,index) in merchantList" :key="index" class="tui-merchant-item">
				<tui-list-cell padding="0" @click="detail(item)">
					<view class="tui-goods-item">
						<image :src="item.avatar" class="tui-goods-img"></image>
						<view class="tui-goods-center">
							<view class="tui-good-info">
								<view class="tui-goods-name">{{item.shopName}}</view>
								<tui-tag v-if="item.levelName" margin="0 0 0 20rpx  " padding="8rpx" size="24rpx"
									type="light-orange">
									{{item.levelName}}
								</tui-tag>
							</view>

							<view class="tui-goods-attr">电话：{{item.phone}}</view>
							<view v-if="item.shopAddress" class="tui-goods-attr">地址：{{item.shopAddress}}</view>
						</view>
						<view class="tui-price-right font-color-red" v-if="item.authStatus === '0'">
							<view @click.stop="auditMeber(item)"
								style="border: 1px solid red;padding: 5rpx 20rpx;border-radius: 30rpx;">审核</view>
						</view>
					</view>
				</tui-list-cell>
			</block>

			<!-- <view class="tui-order-bottom">
					<view class="tui-btm-item">
						<view class="tui-order-btm-num">3</view>
						<view class="tui-order-btm-text">额度</view>
					</view>
					<view class="tui-btm-item">
						<view class="tui-order-btm-num">44</view>
						<view class="tui-order-btm-text">余额</view>
					</view>
					<view class="tui-btm-item">
						<view class="tui-order-btm-num">44</view>
						<view class="tui-order-btm-text">营业额</view>
					</view>
					<view class="tui-btm-item">
						<view class="tui-order-btm-num">44</view>
						<view class="tui-order-btm-text">绩效</view>
					</view>
				</view> -->
			<!-- </view> -->
		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="green"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn" backgroundColor="#fafafa"></tui-nomore>
	</view>
</template>

<script>
	import uCharts from '@/libs/u-charts/u-charts.js';
	var mChartsInstance = {};
	import {
		getMerchantData,
		getMerchantList,
		Audit
	} from '@/apis/user'

	export default {
		data() {
			return {
				merchantName: "营业额数据分析",
				navbar: ["上周", "本周", "30天"],
				// navbar: [{
				// 	name: "上周",
				// }, {
				// 	name: "本周"
				// }, {
				// 	name: "30天"
				// }],
				currentTab: 0,
				cWidth: 750,
				cHeight: 500,
				//0 上周  1 本周  2 近30天
				currentDataType: 1,
				pageNum: 1,
				pageSize: 100,
				businessAnalysis: [],
				curveData: {
					categories: [],
					series: []
				},
				merchantList: [],
				loadding: false,
				pullUpOn: true
			}
		},
		onReady() {

		},
		mounted() {
			// //这里的 750 对应 css .charts 的 width
			this.cWidth = uni.upx2px(750);
			// //这里的 500 对应 css .charts 的 height
			this.cHeight = uni.upx2px(500);
			this.getServerData();
			this.doGetMerchantList();
		},
		methods: {
			auditMeber(item) {

				uni.showLoading({
					title: '审核中...',
					mask: true,

				})
				Audit({
					id: item.id
				}).then((res) => {
					uni.hideLoading();
					uni.showToast({
						title: '审核成功',
						icon: 'success'

					});
					item.authStatus = 1
				})
			},
			change(e) {
				console.log(e)
				this.currentDataType = e.index;
				this.getServerData();

			},
			detail: function(item) {
				this.$yrouter.push({
					path: "/pages/business/merchantDetail/merchantDetail",
					query: {
						id: item.id
					},
				})
			},
			getServerData: function() {
				let that = this;
				getMerchantData(that.currentDataType).then(res => {

					that.businessAnalysis = res.data;
					that.curveData.categories = [];
					that.curveData.series = [];
					var dayAmount = {
						name: "营业额",
						data: []
					};
					res.data.table.forEach(item => {
						that.curveData.categories.push(item.click_date.substring(5));
						dayAmount.data.push(item.amount);

					})
					that.curveData.series.push(dayAmount);
					this.drawCurveCharts('mjaSvTRmhqntNaXubSm', that.curveData);
				})
			},
			doGetMerchantList: function() {
				let that = this;
				console.log("loading:" + that.loadding + ",pullUpOn:" + that.pullUpOn)
				if (that.loadding || !that.pullUpOn) return
				that.loadding = true
				getMerchantList(that.pageNum, that.pageSize).then(res => {

					if (that.pageNum === 1) {
						that.merchantList = [];
					}
					that.merchantList = that.merchantList.concat(res.rows)
					that.pageNum++;
					//是否可以加载更多
					that.pullUpOn = that.merchantList.length < res.total
					//正在加载
					that.loadding = false
					console.log("长度： " + that.merchantList.length + ",pageNum：" + that.pageNum)

				})
			},
			drawCurveCharts(id, data) {
				let that = this;
				const ctx = uni.createCanvasContext(id, this);
				mChartsInstance[id] = new uCharts({
					type: "line",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					categories: data.categories,
					series: data.series,
					animation: true,
					background: "#FFFFFF",
					color: ["#2FCC71"],
					padding: [15, 10, 0, 15],
					fontSize: 10,
					fontColor: "#999999",
					legend: {
						show: false,
					},
					xAxis: {
						disableGrid: true,
						fontColor: "#666666",
						fontSize: 10,
						labelCount: 7,
						itemCount: that.businessAnalysis.length,

					},
					yAxis: {
						disabled: false,
						gridType: "dash",
						fontColor: "#666666",
						fontSize: 10,
						splitNumber: 5,
						dashLength: 2,
						gridColor: "#F2F2F2",
					},
					extra: {
						line: {
							type: "curve",
							width: 2
						}
					}
				});
			},
			//页面相关事件处理函数--监听用户下拉动作
			doOnPullDownRefresh: function() {
				console.log("onPullDownRefresh")
				this.pageNum = 1;
				uni.stopPullDownRefresh();
				// let options = {
				// 	msg: "刷新成功",
				// 	duration: 2000,
				// 	type: "translucent"
				// };
				this.getServerData();
				this.doGetMerchantList();
				// setTimeout(() => {
				// 	this.$refs.toast.showTips(options);
				// }, 300);
			},

			// 页面上拉触底事件的处理函数
			doOnReachBottom: function() {
				console.log("onReachBottom pullUpOn:" + this.pullUpOn)
				if (this.pullUpOn) {
					this.doGetMerchantList();
				}

			}
		},

	}
</script>

<style>
	.tab_container {
		height: auto !important
	}

	.charts {
		width: 750rpx;
		height: 500rpx;
		background: #fff;
	}

	.tui-merchant-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-cell-title {
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: 600;
		color: #333;
	}

	.tui-mm-title {
		line-height: 32rpx;
		min-width: 120rpx;
		flex-shrink: 0;
	}

	.tui-merchant-header-btm {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 0 0 24rpx 0;
		justify-content: space-between;
		border-radius: 12rpx;
		background: white;
	}

	.tui-mm-time-tab {
		width: 300rpx;
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
		flex-shrink: 0;
	}

	.tui-btm-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tui-btm-num {
		font-size: 36rpx;
		font-weight: 600;
		position: relative;
		color: #333;
	}

	.tui-btm-text {
		font-size: 24rpx;
		opacity: 0.85;
		color: #999;
	}

	.tui-merchant-list {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	.tui-cell-header {
		width: 100%;
		height: 74rpx;
		padding: 0 26rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}



	.tui-merchant-item {
		width: 100%;
		margin-top: 20rpx;
		border-radius: 12rpx;
		overflow: hidden;
		background: #fff;
	}

	.tui-goods-title {
		width: 100%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-order-status {
		color: #888;
		font-size: 26rpx;
	}

	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 32rpx;
		color: #333;
	}

	.tui-goods-attr {
		font-size: 24rpx;
		color: #999;
		line-height: 32rpx;
		padding-top: 10rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-good-info {
		width: 100%;
		display: flex;
	}

	.tui-goods-img {
		width: 120rpx;
		height: 120rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-order-bottom {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		margin: 24rpx;
		justify-content: space-between;
		background: #F7FDF7;
		border-radius: 12rpx;
	}

	.tui-order-btm-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tui-order-btm-num {
		font-size: 36rpx;
		font-weight: 600;
		position: relative;
		color: #333;
		margin-top: 24rpx;
	}

	.tui-order-btm-text {
		font-size: 24rpx;
		opacity: 0.85;
		padding-top: 11rpx;
		margin-bottom: 24rpx;
		color: #999;
	}
</style>